<template>
  <div class="app-container pagebox" style="min-height:100vh">
    <a-form-model ref="ruleForm" :model="model" :rules="rules" class="ant-advanced-search-form" style="width:100%">
      <a-row :gutter="20">
        <a-col :span="6">
          <div class="bg box">
            <div class="order_title">基本信息</div>
            <a-row :gutter="44">
              <a-col>
                <a-row :gutter="20">
                  <a-form-model-item label="订单名称" prop="orderName">
                    <a-input v-model="model.orderName" placeholder="请输入订单名称" @keyup.enter.prevent />
                  </a-form-model-item>
                  <a-form-model-item label="客户名称" prop="customerName">
                    <a-input v-model="model.customerName" placeholder="请输入客户名称" />
                  </a-form-model-item>
                </a-row>
                <a-row :gutter="20">
                  <a-form-model-item label="工件编号" prop="productNumber">
                    <a-input v-model="model.productNumber" placeholder="请输入工件编号" />
                  </a-form-model-item>
                  <a-form-model-item label="销售单号" prop="saleNumber">
                    <a-input v-model="model.saleNumber" placeholder="请输入销售单号" />
                  </a-form-model-item>
                </a-row>
                <a-row :gutter="20">
                  <a-form-model-item label="工件名称" prop="productName">
                    <a-input v-model="model.productName" placeholder="请输入工件名称" />
                  </a-form-model-item>
                  <a-form-model-item label="计划完成数量" prop="planCount">
                    <a-input v-model="model.planCount" format="YYYY-MM-DD" placeholder="请输入计划完成数量" />
                  </a-form-model-item>
                </a-row>
                <a-row :gutter="20">
                  <a-form-model-item label="任务开始时间" prop="startTime">
                    <a-date-picker v-model="model.startTime" placeholder="请选择任务开始时间" style="width:100%" />
                  </a-form-model-item>
                </a-row>
                <a-row :gutter="20">
                  <a-form-model-item label="计划完工时间" prop="endTime">
                    <a-date-picker v-model="model.endTime" placeholder="请选择计划完工时间" style="width:100%" />
                  </a-form-model-item>
                  <a-form-model-item label="毛坯总库存" prop="stockNumber">
                    <a-input v-model="model.stockNumber" placeholder="请输入毛坯总库存" />
                  </a-form-model-item>
                </a-row>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <!-- 右侧区域 -->
        <a-col :span="18">
          <div class="bg box">
            <a-row :gutter="20" class="flex-a-c">
              <div class="order_title">生产计划</div>
              <a-button class="orderButton" icon="plus-circle" type="primary" @click="handleAdd">添加工序</a-button>
            </a-row>
            <!-- 右侧生产计划区域 -->
            <div v-for="(item, index) in model.workingProcedureVoList" :key="index" class="workBox">
              <a-icon class="closeBtn" type="close" @click="() => handleRemove(index)"></a-icon>
              <a-row :gutter="20">
                <a-col :span="6">
                  <a-form-model-item
                    :label="`工序名称${index + 1}`"
                    :labelCol="{ span: 8 }"
                    :prop="`workingProcedureVoList[${index}].workingProcedureName`"
                    :rules="rules.workingProcedureName"
                    :wrapperCol="{ span: 16 }"
                  >
                    <a-input v-model="item.workingProcedureName" placeholder="请输入工序名称" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="10">
                  <a-form-model-item
                    :labelCol="{ span: 8 }"
                    :prop="`workingProcedureVoList[${index}].macSNs`"
                    :rules="rules.macSNs"
                    :wrapperCol="{ span: 16 }"
                    label="加工设备"
                  >
                    <div class="flex">
                      <a-textarea :disabled="true" v-model="item.macSNs" placeholder="请选择加工设备" />
                      <div class="choose" @click="handleChoose(index)">选择</div>
                    </div>
                  </a-form-model-item>
                  <a-form-model-item
                    :labelCol="{ span: 8 }"
                    :prop="`workingProcedureVoList[${index}].checkTime`"
                    :rules="rules.checkTime"
                    :wrapperCol="{ span: 16 }"
                    label="起止时间"
                  >
                    <a-range-picker v-model="item.checkTime" style="width:80%" />
                  </a-form-model-item>
                  <a-form-model-item
                    :labelCol="{ span: 8 }"
                    :prop="`workingProcedureVoList[${index}].produceName`"
                    :rules="rules.produceName"
                    :wrapperCol="{ span: 16 }"
                    label="程序名"
                  >
                    <a-input v-model="item.produceName" placeholder="请输入程序名" style="width:80%" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }" label="工艺图纸">
                    <imageUpload v-model="item.artWorkSheet" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
            <!-- 选择加工设备 -->
            <choose-device ref="choose" @macSNs="getMacSNs"></choose-device>
          </div>
          <a-row>
            <a-col :span="24" :style="{ textAlign: 'center' }">
              <a-button style="margin-top:40px" type="primary" @click="handleSubmit">添加</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import imageUpload from './conmponents/imageUpload';
import chooseDevice from './conmponents/chooseDevice.vue';
import api from '@/api/equipment';

export default {
  components: {
    imageUpload,
    chooseDevice,
  },
  data() {
    return {
      model: {
        workingProcedureVoList: [
          { workingProcedureName: '', macSNs: '', checkTime: '', produceName: '', artWorkSheet: '' },
        ],
      }, // 表单数据源
      companyId: '', // 公司id
      rules: {
        orderName: [{ required: true, message: '请输入订单名称', trigger: 'change' }],
        productNumber: [{ required: true, message: '请输入工件编号', trigger: 'change' }],
        saleNumber: [{ required: true, message: '请输入销售单号', trigger: 'change' }],
        productName: [{ required: true, message: '请输入工件名称', trigger: 'change' }],
        planCount: [{ required: true, message: '请输入计划完成数量', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择任务开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择计划完工时间', trigger: 'change' }],
        stockNumber: [{ required: true, message: '请输入毛坯总库存', trigger: 'change' }],
        workingProcedureName: [{ required: true, message: '请输入工序名称', trigger: 'change' }],
        macSNs: [{ required: true, message: '请选择加工设备', trigger: 'change' }],
        checkTime: [{ required: true, message: '请选择起止时间', trigger: 'change' }],
        produceName: [{ required: true, message: '请输入程序名', trigger: 'change' }],
      }, // 表单验证规则
    };
  },
  created() {
    // 通过角色所属部分 来获取对应的公司 ID
    let roleId = localStorage.getItem('roleId');
    if (roleId == 1) {
      this.companyId = Number(localStorage.getItem('compid'));
    } else {
      this.companyId = Number(localStorage.getItem('choseCompanyId'));
    }
  },
  methods: {
    // 选择加工设备
    async handleChoose(index) {
      const params = { companyId: this.companyId };
      const res = await api.getEquipmentList(params);
      if (res.msgCode === 0 && res.data.length > 0) {
        const list = res.data;
        list.forEach((element) => {
          element.checkLength = 0; // 选中的数量
          element.MacSNs.forEach((item) => {
            //  再次点时 回显选中的选项
            if (this.model.workingProcedureVoList[index].macSNs !== '') {
              const checkMacSns = this.model.workingProcedureVoList[index].macSNs.split(',');
              checkMacSns.forEach((row) => {
                if (item.macsn === row) {
                  item.show = true;
                }
              });
              this.$refs.choose.checkList = [];
            } else {
              item.show = false; // 添加是否选中属性
            }
          });
          // 再次点击时 选中的数量
          element.checkLength = element.MacSNs.filter((record) => {
            return record.show === true;
          }).length;
        });
        // 子组件数据传递
        this.$refs.choose.list = list;
        this.$refs.choose.active = 0;
        this.$refs.choose.equipmentList = res.data[0].MacSNs;
        this.$refs.choose.checkIndex = index;
        this.$refs.choose.showModal();
      } else {
        this.$message.error('暂无数据');
      }
    },
    // 选择时接受的回调
    getMacSNs(val, index) {
      this.model.workingProcedureVoList[index].macSNs = val;
    },
    // 表单新增
    handleAdd() {
      this.model.workingProcedureVoList = [
        ...this.model.workingProcedureVoList,
        { workingProcedureName: '', macSNs: '', checkTime: '', produceName: '', artWorkSheet: '' },
      ];
    },
    // 表单删除
    handleRemove(index) {
      if (this.model.workingProcedureVoList.length === 1) {
        return;
      }
      this.model.workingProcedureVoList = this.model.workingProcedureVoList.filter((item, i) => i != index);
    },
    // 表单提交
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = this.model;
          params['startTime'] = params['startTime'].format('YYYY-MM-DD');
          params['endTime'] = params['endTime'].format('YYYY-MM-DD');
          params.planCount = Number(params.planCount);
          params.stockNumber = Number(params.stockNumber);
          params.workingProcedureVoList.forEach((item) => {
            if (item.checkTime.length > 0) {
              item.startTime = item.checkTime[0].format('YYYY-MM-DD');
              item.endTime = item.checkTime[1].format('YYYY-MM-DD');
            }
            if (item.artWorkSheet.id) {
              item.artWorkSheet = item.artWorkSheet.url;
            }
          });
          params.companyId = this.companyId;
          api.addTask(params).then((res) => {
            if (res.msgCode === 0) {
              this.$message.info(res.msgDesc);
              this.$router.push('/orderDetail');
            } else {
              this.$message.error(res.msgDesc);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import 'index';

.operation-button {
  cursor: pointer;
  position: relative;
  top: 42px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.operation-button:hover {
  color: #777;
}
</style>
